<template>
	<view>
		<tn-nav-bar alpha backTitle=""></tn-nav-bar>
			<view :style="{ paddingTop: vuex_custom_bar_height + 'px' }"> </view>

 
			<view class="title" v-if="progress<3">
				<view>请连续拍摄一张</view>
				<view>
					宠物正面和两张侧面照片
				</view>
			</view>
			<view class="title" v-if="progress==3||progress==4||progress==5">
				<view>请用水机摄像头</view>
				<view>
					拍摄三张宠物照片
				</view>
			</view>
			<view class="title" v-if="progress==6">
				<view>拍摄完成</view>
				
			</view>
				<view class="photo-page">
    <view class="circle-img-wrap" v-if="progress == 1||progress==4">
      <image class="cat-blur" src="/static/image/maotou.png" mode="aspectFill" />
      <view class="camera-icon-wrap">
        <image class="camera-icon" src="/static/image/xiangji.png" />
      </view>
    </view>
		<view class="circle-img-wrap" v-if="progress == 2||progress==5||progress==6">
      <image class="cat-blur2" src="/static/image/maotou.png" mode="aspectFill" />
    
    </view>
		<!-- 饮水机 -->
		<image v-if="progress==3" class="cat-img2" style="width:600rpx;height: 500rpx;" src="/static/image/yinshui.png" mode="widthFix" />
		<view style="margin-top: 80rpx;padding: 0 32rpx;">
			<view class="cat-img2-title" style="text-align: left;font-weight:bold;margin-top: 32rpx;">
			请您拍摄猫咪的正面水平的照片
		</view>
		<view  v-if="progress==3" class="cat-img2-sub" style="text-align: left;margin-top: 32rpx;color: #999;">
			在拍摄时，确保猫咪的面部清晰可见，眼睛、鼻子和嘴巴要在照片中完整呈现，以宠物双眼连线为基准，上下左右不超过15度，并避免遮挡或过度反光
		</view>
		</view>
    <view class="progress" v-if="progress!=3">1/3</view>
 
			




    <view class="btn-wrap u-f-ajc u-f-c">
      <button class="shoot-btn u-f-ajc" @click="shoot" v-if="progress==1||progress==3||progress==4" >点击拍摄</button>
      <button class="shoot-btn u-f-ajc" @click="shoot" v-if="progress==2||progress==5" >继续拍摄</button>

      <button class="shoot-btn u-f-ajc" v-if="progress==6" @click="upLoad">确认上传</button>

			<view style="color: #999;font-size: 28rpx;margin-top:50rpx" @click="reShoot" v-if="progress==2||progress==4||progress==5||progress==6">重新拍摄</view>
    </view>
  </view>
	</view>
 
</template>

<script>
export default {
  data() {
    return {
      progress:1
    }
  },
  methods: {
		upLoad(){
			 uni.navigateTo({
				url: '/pages/register/res?type=face'
			})
		},
		reShoot(){
			this.progress = 1
		},
    shoot() {
      this.progress++
			
    }
  }
}
</script>

<style scoped>
.title {
	
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 0rpx;
	color: #111;
	margin-top: 0px;
}
.photo-page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60rpx;
}
.circle-img-wrap {
  width: 420rpx;
  height: 420rpx;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.08);
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blur2{
	width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-blur {
  width: 100%;
  height: 100%;
  filter: blur(8px);
  object-fit: cover;
  display: block;
}
.camera-icon-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64rpx;
  height: 64rpx;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-icon {
  width: 48rpx;
  height: 48rpx;
  display: block;
}
.progress {
  margin-top: 32rpx;
  color: #888;
  font-size: 28rpx;
  text-align: center;
}
.btn-wrap {
  width: 100%;
  left: 0;
	margin-top: 50px;
  bottom: 48rpx;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.shoot-btn {
  width: 90vw;
  height: 96rpx;
  background: #111;
  color: #fff;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.10);
}
</style>
